<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>融昌建材全产业链工作台</title>
    <link rel="icon" href="images/icon.png">
    <link rel="stylesheet" type="text/css" href="css/header.css" />
    <link rel="stylesheet" href="lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="css/layuimini.css?v=2.0.4.2" media="all">
    <link rel="stylesheet" href="css/themes/default.css" media="all">
    <link rel="stylesheet" href="lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            position: relative;
            top: 270px;
            left: 40px;
            width: 1535px;
            height: 700px;
        }

        .dropbtn:hover {
            color: black;
        }

        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .cardTitle {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
            color: rgb(75, 145, 225);
            border-left: 5px solid rgb(75, 145, 225);
            margin: 15px 0;
        }

        .receiveInfo {
            width: 1200px;
            height: 350px;
        }

        .detail {
            width: 1200px;
            height: 350px;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="headerTips">
            <div class="headerTipsL">
                <div class="beforeLogin">
                    <a href="login.html" id="login">请登录</a>
                    <a href="register.html" id="register">免费注册</a>
                </div>
                <div class="afterLogin">
                    <a style="color: black;" id="username">赵先生</a>
                    <img src="images/邮箱.png" alt="" style="cursor: pointer;">
                    <span id="exit"
                        style="cursor: pointer;color:rgb(75, 145, 225);font-size: 14px;margin-left: 20px;">退出</span>
                </div>
            </div>
            <div class="headerTipsR">
                <ul>
                    <div class="dropdown" id="dropdown1">
                        <a href="page/gdzx.html" class="dropbtn">工地中心<img src="images/down.png" alt=""></a>
                        <div class="dropdown-content" id="dropdown-content1">
                            <a href="page/myOrder.html">我的订单</a>
                            <a href="#">我的合同</a>
                            <a href="#">我的消息</a>
                        </div>
                    </div>
                    <div class="dropdown" id="dropdown2">
                        <a href="#" class="dropbtn">OEM中心<img src="images/down.png" alt=""></a>
                        <div class="dropdown-content" id="dropdown-content2">
                            <a href="#">入驻平台</a>
                            <a href="#">我的任务</a>
                            <a href="#">我的消息</a>
                        </div>
                    </div>
                    <div class="dropdown">
                        <a href="#" class="dropbtn"><img src="images/bars.png" alt="">收藏中心</a>
                    </div>
                </ul>
            </div>
        </div>
        <div class="headerAdv">
            <a href=""><img src="images/首页/首页广告.png" style="width: 100%;" alt=""></a>
        </div>
        <div class="headerTitle">
            <div class="logo"><img src="images/logo.png" alt=""></div>
            <div class="title">
                <h1 style="font-weight: bold;">建材一站式服务平台</h1>
            </div>
            <div class="location">
                <p>郑州站</p>
                <a href="">【城市切换】</a>
            </div>
            <div class="search">
                <span class="search-text">全站搜索</span>
                <input type="text" name="" id="" value="请输入关键字查询相关资料">
                <span class="searchbtn" style="right: -6px;"><a href="#">搜索</a></span>
            </div>
        </div>
        <div class="headerbtn">
            <div class="dropdown" id="jcxg">
                <a href="#" class="dropbtn" onclick=" var contract = 0;
                if (document.getElementById('contract1').style.color == 'grey' || document.getElementById('contract2').style
                    .color == 'grey')
                    {contract = 1};
                this.href = 'buyMaterial.html?contract=' + contract;">建材选购<img src="images/down2.png" alt=""
                        style="width: 18px;margin-left: 5px;" id="jcxgbtn"></a>
                <div class="dropdown-content" style="height: 350px;">
                    <div class="xd" id="htxd">
                        <span class="xd-title">合同下单</span>
                        <div style="margin-left: 10px;">
                            <span href="" class="choice">旭辉运河悦章</span>
                            <span href="" class="choice">旭辉运河悦章</span>
                        </div>
                    </div>
                    <div class="xd" id="ptxd">
                        <span class="xd-title">普通下单</span>
                        <div class="nj">
                            <img src="images/分类.png" alt=""
                                style="width: 30px;margin-left: 10px;display:inline-block;vertical-align: middle;">
                            <span
                                style="color: rgb(75, 145, 225);height: 30px;line-height:30px;display:inline-block;vertical-align: middle;">砂浆</span>
                        </div>
                        <div style="margin-left: 10px;">
                            <span href="" class="choice">水泥泥浆</span>
                            <span href="" class="choice">混合砂浆</span>
                            <span href="" class="choice">特种砂浆</span>
                            <br>
                            <span href="" class="choice">其他砂浆</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="changePage">
                <span href="" id='page1' style="color: rgb(75, 145, 225);
                border-bottom: 5px solid rgb(75, 145, 225)">首页</span>
                <span href="" id="page2">全部商品</span>
                <span href="" id="page3">平台服务</span>
                <span href="" id="page4">骆驼快讯</span>
                <span href="" id="page5">推广有礼</span>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="nav">
            <a href="index.html">首页</a>
            <span>>></span>
            <a href="#">确认订单</a>
        </div>
        <div class="workplace">
            <p class="cardTitle">所选工地</p>
            <button type="button" class="layui-btn layui-btn-primary"
                style="border-radius: 5px;width: 150px;margin-right: 20px;" id="workplace1">旭辉运河悦章</button>
            <button type="button" class="layui-btn layui-btn-primary" style="border-radius: 5px;width: 150px;"
                id="self">个人身份</button>
        </div>
        <div class="receiveInfo">
            <p class="cardTitle">收货信息</p>
            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                </div>
            </script>

            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

            <script type="text/html" id="currentTableBar">
                <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">修改</a>
            </script>
        </div>
        <div class="detail">
            <p class="cardTitle"></p>
            <div style="padding: 10px;border: 1px solid #eeeeee;">
                <div class="layuimini-container">
                    <div class="layuimini-main">
                        <table class="layui-hide" id="currentTableId2" lay-filter="currentTableFilter2"></table>
                    </div>
                </div>
                <div style="cursor: pointer;margin: 10px 0;">
                    <img src="images/加号.png" alt="" style="width: 18px;vertical-align: middle;" id="show">
                    <img src="images/减号.png" alt="" style="width: 18px;vertical-align: middle;display: none;" id="hide">
                    <span style="color:rgb(75, 145, 225);display: inline-block;vertical-align: middle;">选择附属商品</span>
                </div>
                <div class="addition" style="display: none;">
                    <img src="images/防冻液.png" alt="" style="vertical-align: middle;">
                    <span style="display: inline-block;vertical-align: middle;">防冻剂</span>
                    <span style="margin-left: 30px;display: inline-block;vertical-align: middle;">¥10.00</span>
                    <div style="margin-left: 50px;display: inline-block;vertical-align: middle;">
                        <img src="images/减.png" alt="" style="width: 28px;cursor: pointer;" id="sub">
                        <input type="text" value="1支" style="outline: none;margin:0 5px;width: 50px;text-align: center;"
                            class="number2">
                        <img src="images/加.png" alt="" style="width: 28px;cursor: pointer;" id="add">
                    </div>
                </div>
                <div class="layui-form layuimini-form" style="margin-top: 20px;">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="text" name="time" id="time" placeholder="请选择期望送达时间" value=""
                                class="layui-input"
                                style="margin-left: -100px;width: 150px;border: none;display: inline-block;vertical-align: middle;">
                            <img src="images/日历.png" alt="" style="vertical-align: middle;width: 20px;cursor: pointer;">
                        </div>
                    </div>
                </div>
                <div style="width: 100%;height:1px;border-top: 1px solid #eeeeee;margin-bottom: 10px;"></div>
                <div class="layui-form-item layui-form-text">
                    <div class="layui-input-block">
                        <textarea name="desc" placeholder="请输入您的备注" class="layui-textarea"
                            style="margin-left: -100px;border: none;"></textarea>
                    </div>
                </div>
                <div style="width: 100%;height:1px;border-top: 1px dashed #eeeeee;margin-bottom: 10px;"></div>
                <div style="margin-left: 870px;height: 150px;width: 300px;text-align: right;">
                    <p>已选1种商品，共<span id="Unit"></span>，总商品金额：<span id="Price" style="margin-left: 20px;"></span></p>
                    <p>运费：<span style="margin-left: 20px;">¥0.00</span></p>
                    <p>合计：<span id="totalPrice" style="margin-left: 20px;"></span></p>
                    <button type="button" class="layui-btn layui-btn-primary"
                        style="border-radius: 5px;width: 110px;background-color:rgb(75, 145, 225);color: white;margin-top: 20px;"
                        id="submit">提交并支付</button>
                </div>
            </div>
        </div>
    </div>

    <script src="lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="js/lay-config.js?v=2.0.0" charset="utf-8"></script>
    <script type="text/html" id="Tpl">
        <img src="{{d.mimg}}" alt="" style="margin-right: 25px;">
        <span style="line-height: 150px;">{{d.mname}}</span>
    </script>
    <script type="text/html" id="Tpl2">
        <img src="images/减.png" alt="" style="width: 28px;cursor: pointer;vertical-align: middle;" id="sub"
            onmouseover="this.src='images/减2.png'" onmouseout="this.src='images/减.png'">
        <input type="text" value="{{d.number}}{{d.unit}}"
            style="outline: none;margin:0 5px;width: 60px;text-align: center;vertical-align: middle;" class="number"
            id="number">
        <img src="images/加.png" alt="" style="width: 28px;cursor: pointer;" id="add"
            onmouseover="this.src='images/加2.png'" onmouseout="this.src='images/加.png'">
    </script>
    <script>
        layui.use(['jquery', 'layer', 'table'], function () {
            var $ = layui.jquery,
                layer = layui.layer,
                table = layui.table;
            var remember = 0; //是否记住密码
            var password = '';
            var username = '';
            var strCookie = document.cookie;
            var workplace = '';
            var list = [];
            if (strCookie != '') {
                var arrCookie = strCookie.split("; ");
                for (i = 0; i < arrCookie.length; i++) {
                    var arr = arrCookie[i].split("=");
                    if (arr[0] == 'username')
                        username = arr[1];
                    else if (arr[0] == 'remember')
                        remember = 1;
                    else if (arr[0] == 'password')
                        password = arr[1];
                }
            }
            var url = window.location.href;
            var param = url.split('?');
            var mid = '';
            var num = '';
            var getjs = '';
            if (param[1].indexOf('&') != -1) {
                var params = param[1].split('&');
                mid = params[0].split('=')[1];
                num = params[1].split('=')[1];
                getjs = '/buyDetail';
            } else {
                mid = param[1].split('=')[1];
                getjs = '/cart';
            }
            $('body').ready(function () {
                if (username != '') {
                    $('.beforeLogin').css('display', 'none');
                    $('.afterLogin').css('display', 'block');
                    document.getElementById('username').innerText = username;
                } else {
                    $('.beforeLogin').css('display', 'block');
                    $('.afterLogin').css('display', 'none');
                }
                $('#workplace1').css('color', 'white');
                $('#workplace1').css('background-color', 'rgb(75, 145, 225)');
                workplace = $('#workplace1').text();
                table.render({
                    elem: '#currentTableId',
                    toolbar: '#toolbarDemo',
                    defaultToolbar: [],
                    url: '/workplace',
                    method: 'get',
                    parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "count": res.count, //解析表格数据总条数 eg:共100页              
                            "data": res.data //解析table表格数据源
                        };
                    },
                    where: {
                        "username": username,
                        "workplace": workplace,
                        "mode": '5',
                    }, //where用来传递请求时额外的参数 eg:productName
                    cols: [
                        [{
                            type: "radio",
                            width: 50
                        },
                        {
                            field: 'siteDetail',
                            width: 400,
                            align: "left",
                        },
                        {
                            field: 'workername',
                            width: 200,
                            align: "left",
                            templet: '<div>{{d.workername}} {{d.workerphone}}</div>',
                        },
                        {
                            minWidth: 100,
                            toolbar: '#currentTableBar',
                            align: "center"
                        }
                        ]
                    ],
                    skin: 'line',
                    done: function (res, curr, count) {
                        $('#currentTableId th').hide()
                    }
                });

            })

            table.render({
                elem: '#currentTableId2',
                url: getjs,
                method: 'get',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.count, //解析表格数据总条数 eg:共100页              
                        "data": res.data //解析table表格数据源
                    };
                },
                where: {
                    "username": username,
                    "mid": mid,
                    "number": num,
                    "mode2": '4'
                }, //where用来传递请求时额外的参数 eg:productName
                cols: [
                    [{
                        field: 'mname',
                        width: 400,
                        title: '货物名称',
                        style: 'height:160px;line-height:160px',
                        templet: '#Tpl'
                    },
                    {
                        field: 'mtype',
                        width: 250,
                        title: '型号',
                        align: "center",
                        sort: true
                    },
                    {
                        field: 'mprice',
                        width: 250,
                        title: '单价',
                        align: "center",
                        sort: true,
                        templet: '<div><span id="p">¥{{d.mprice}}</span></div>'
                    },
                    {
                        field: 'number',
                        title: '数量',
                        minWidth: 150,
                        align: "center",
                        sort: true,
                        templet: '#Tpl2'
                    }
                    ]
                ],
                skin: 'line',
                done: function (res, curr, count) {
                    var num = $('.number').val();
                    var price = $('#p').text().split('¥')[1];
                    $('#Unit').text(num);
                    $('#Price').text('¥' + price * parseInt(num));
                    $('#totalPrice').text('¥' + price * parseInt(num));
                }
            });
            table.on('radio(currentTableFilter)', function (obj) {
                var checkStatus = table.checkStatus('currentTableId');
                list = checkStatus.data;
                if (list.length != 0) {
                    $('#total').css('display', 'inline-block');
                    $('#selectedNum').text(list.length);
                    var total = 0;
                    for (i = 0; i < list.length; i++)
                        total = total + parseFloat(list[i].mprice) * list[i].number;
                    $('#selectedPrice').text('¥' + total);
                } else {
                    $('#total').css('display', 'none');
                }
                console.log(list);


            });
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'add') { // 监听添加操作
                    var flag = 0;
                    if (workplace == '个人身份')
                        flag = 1;
                    var index = layer.open({
                        title: '添加收货地址',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: 'page/table/addwkp.html?flag=' + flag,
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                }
            });
            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data;
                var flag = '0';
                var pid = data.pid;
                if (workplace == '个人身份')
                    flag = 1;
                if (obj.event === 'edit') {
                    var index = layer.open({
                        title: '编辑收货地址',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        shadeClose: true,
                        area: ['100%', '100%'],
                        content: 'page/table/editwkp2.html?flag=' + flag + '& pid=' + pid,
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                }
            });
            $('#exit').on('click', function () {
                $('.beforeLogin').css('display', 'block');
                $('.afterLogin').css('display', 'none');
                clearCookie();
                if (remember)
                    document.cookie = "remember=1";
                if (password != '')
                    document.cookie = "password=" + password;
                if (username != '')
                    document.cookie = "username=" + username;
            })
            $('.search input').on('focus', function () {
                $(this).val('');
                $(this).css('color', 'black');
            })
            $('.search input').on('blur', function () {
                if ($(this).val() == '') {
                    $(this).val('请输入关键字查询相关资料');
                    $(this).css('color', '#ccc');
                } else {
                    $(this).css('color', 'black');
                }
            })
            $('.choice').on('click', function () {
                if ($(this).css('color') == 'rgb(156, 156, 156)') {
                    $(this).css('color', 'grey');
                    $(this).css('border', '1px solid grey');
                } else {
                    $(this).css('color', '#ccc');
                    $(this).css('border', '1px solid #ccc');
                }
            })
            $('.choice').on('mouseover', function () {
                if ($(this).css('color') != 'rgb(128, 128, 128)') {
                    $(this).css('color', 'rgb(156, 156, 156)');
                    $(this).css('border', '1px solid rgb(156, 156, 156)');
                }
            })
            $('.choice').on('mouseout', function () {
                if ($(this).css('color') != 'rgb(128, 128, 128)') {
                    $(this).css('color', '#ccc');
                    $(this).css('border', '1px solid #ccc');
                }
            })
            $('.changePage span').on('click', function () {
                for (i = 1; i < 6; i++) {
                    $('#page' + i).css('color', 'black');
                    $('#page' + i).css('border', 'none');
                }
                $(this).css('color', 'rgb(75, 145, 225)');
                $(this).css('border-bottom', '5px solid rgb(75, 145, 225)');
            })
            $('#submit').on('click', function () {
                var price = $('#totalPrice').text();
                if (list.length == 0)
                    layer.msg('请选择收货地址');
                else if ($('#time').val() == '')
                    layer.msg('请选择期望送达时间');
                else
                    window.location = 'page/pay1.html?mid=' + mid + '&price=' + price.substr(1, price
                        .length - 1);
            })
            $('#add').on('click', function () {
                var num = $('.number2').val();
                $('.number2').val(parseInt(num) + 1 + '支');
                var price = $('#totalPrice').text().split('¥')[1];
                var price2 = parseInt(price) + 10;
                $('#Price').text('¥' + price2);
                $('#totalPrice').text('¥' + price2);
            })

            $('#sub').on('click', function () {
                var num = $('.number2').val();
                if ((parseInt(num) - 1) != 0) {
                    $('.number2').val(parseInt(num) - 1 + '支');
                    var price = $('#totalPrice').text().split('¥')[1];
                    var price2 = parseInt(price) - 10;
                    $('#Price').text('¥' + price2);
                    $('#totalPrice').text('¥' + price2);
                } else
                    layer.msg('已减至最小');
            })
            $('#show').on('click', function () {
                $('.addition').css('display', 'block');
                $(this).css('display', 'none');
                $('#hide').css('display', 'inline-block');
                var num = $('.number2').val();
                var price = $('#totalPrice').text().split('¥')[1];
                var price2 = parseInt(price) + 10 * parseInt(num);
                $('#Price').text('¥' + price2);
                $('#totalPrice').text('¥' + price2);
            })
            $('#hide').on('click', function () {
                var num = $('.number2').val();
                $('.addition').css('display', 'none');
                $(this).css('display', 'none');
                $('#show').css('display', 'inline-block');
                var price = $('#totalPrice').text().split('¥')[1];
                var price2 = parseInt(price) - 10 * parseInt(num);
                $('#Price').text('¥' + price2);
                $('#totalPrice').text('¥' + price2);
            })
            $('#workplace1').on('click', function () {
                if ($(this).css('color') == 'rgb(51, 51, 51)') {
                    $(this).css('color', 'white');
                    $(this).css('background-color', 'rgb(75, 145, 225)');
                    $('#self').css('color', 'rgb(51, 51, 51)');
                    $('#self').css('background-color', 'white');
                }
                table.render({
                    elem: '#currentTableId',
                    toolbar: '#toolbarDemo',
                    defaultToolbar: [],
                    url: '/workplace',
                    method: 'get',
                    parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "count": res.count, //解析表格数据总条数 eg:共100页              
                            "data": res.data //解析table表格数据源
                        };
                    },
                    where: {
                        "username": username,
                        "workplace": $('#workplace1').text(),
                        "mode": '5',
                    }, //where用来传递请求时额外的参数 eg:productName
                    cols: [
                        [{
                            type: "radio",
                            width: 50
                        },
                        {
                            field: 'siteDetail',
                            width: 400,
                            align: "left",
                        },
                        {
                            field: 'workername',
                            width: 200,
                            align: "left",
                            templet: '<div>{{d.workername}} {{d.workerphone}}</div>',
                        },
                        {
                            minWidth: 100,
                            toolbar: '#currentTableBar',
                            align: "center"
                        }
                        ]
                    ],
                    skin: 'line',
                    done: function (res, curr, count) {
                        $('#currentTableId th').hide()
                    }
                });
            })
            $('#self').on('click', function () {
                if ($(this).css('color') == 'rgb(51, 51, 51)') {
                    $(this).css('color', 'white');
                    $(this).css('background-color', 'rgb(75, 145, 225)');
                    $('#workplace1').css('color', 'rgb(51, 51, 51)');
                    $('#workplace1').css('background-color', 'white');
                }
                table.render({
                    elem: '#currentTableId',
                    toolbar: '#toolbarDemo',
                    defaultToolbar: [],
                    url: '/workplace',
                    method: 'get',
                    parseData: function (res) { //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "count": res.count, //解析表格数据总条数 eg:共100页              
                            "data": res.data //解析table表格数据源
                        };
                    },
                    where: {
                        "username": username,
                        "workplace": '个人身份',
                        "mode": '5',
                    }, //where用来传递请求时额外的参数 eg:productName
                    cols: [
                        [{
                            type: "radio",
                            width: 50
                        },
                        {
                            field: 'siteDetail',
                            width: 400,
                            align: "left",
                        },
                        {
                            field: 'workername',
                            width: 200,
                            align: "left",
                            templet: '<div>{{d.workername}} {{d.workerphone}}</div>',
                        },
                        {
                            minWidth: 100,
                            toolbar: '#currentTableBar',
                            align: "center"
                        }
                        ]
                    ],
                    skin: 'line',
                    done: function (res, curr, count) {
                        $('#currentTableId th').hide()
                    }
                });
            })
        })
    </script>
</body>

</html>